import React, { Component } from 'react'

export default class Model extends Component {
  state = {
    foodname: '',
    price: '',
    description: '',
    classify: '',
    img: ''
  }
  componentDidMount() {
    let obj = { ...this.props.changeObj }
    // obj && (obj.price = obj.price.toFixed(2))
    this.setState(obj)
  }

  handleChange = (item, event) => {
    this.setState({ [item]: event.target.value })
  }

  handleImgChange = (e) => {
    let formdata, xhr
    // console.log(e.target.value)
    if (!e.target.value) return

    formdata = new FormData()
    formdata.append('img', e.target.files[0])
    xhr = new XMLHttpRequest()
    xhr.open('post', 'http://localhost/students/upload.php', true)
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(formdata)
    // console.log(e.target.files[0])
    xhr.onload=()=>{
      let res = JSON.parse(xhr.responseText)
      if (res.success){
        this.setState({
          img: res.fileName
        })
      }
    }
  }

  render() {

    return (
      <div className="modal fade in" id="modal-default" style={{ display: "block", paddingRight: 17 }}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button onClick={this.props.hideForm} type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span></button>
              <h4 className="modal-title">添加菜品</h4>
            </div>
            <div className="modal-body">
              <form className="form-horizontal">
                <div className="box-body">
                  <div className="form-group">
                    <label htmlFor="inputname3" className="col-sm-2 control-label">菜系类别</label>
                    <div className="col-sm-10">
                      <input onChange={this.handleChange.bind(null, "foodname")}
                        value={this.state.foodname}
                        type="text" className="form-control" id="inputname3" placeholder="请输入菜名"
                      />
                    </div>
                  </div>
                  <div className="form-group">
                    <label htmlFor="inputprice3" className="col-sm-2 control-label">价格</label>
                    <div className="col-sm-10">
                      <input onChange={this.handleChange.bind(null, "price")}
                        // onKeyUp="value=value.replace(/[^\d]/g,'')"
                        value={this.state.price}
                        type="text" className="form-control" id="inputprice3" placeholder="请输入价格"
                      />
                    </div>
                  </div>
                  <div className="form-group">
                    <label htmlFor="inputdescription3" className="col-sm-2 control-label">菜品说明</label>
                    <div className="col-sm-10">
                      <textarea onChange={this.handleChange.bind(null, "description")} id="inputdescription3"
                        value={this.state.description} className="form-control" rows="3"
                        placeholder="请输入菜品描述"
                      ></textarea>
                    </div>
                  </div>

                  <div className="form-group">
                    <label className="col-sm-2 control-label">菜品类别</label>
                    <div className="col-sm-10">
                      <select value={this.state.classify} name={this.state.classify} className="form-control" onChange={this.handleChange.bind(null, "classify")}>
                        {
                          this.props.classesList.map((cla, index) => {
                            return <option key={"option_" + index} value={cla.id} > {cla.foodtype}</option>
                          })
                        }
                      </select>
                    </div>
                  </div>

                  <div className="form-group">
                    <label htmlFor="inputimg3" className="col-sm-2 control-label">菜品图片</label>
                    <div className="col-sm-10">
                      <input  onChange={this.handleImgChange} type="file" placeholder="请选择图片" />
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <div className="modal-footer">
              <button onClick={this.props.hideForm} type="button" className="btn btn-default pull-left">关闭</button>
              <button onClick={this.props.saveData.bind(null, this.state)} type="button" className="btn btn-primary">保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
